<template>
  <view class="follow-container">
    <!-- 页面标题 -->
    <view class="page-header">
      <view class="back-btn" @click="goBack">
        <u-icon name="arrow-left" size="20" color="#333"></u-icon>
      </view>
      <view class="page-title">成员跟进</view>
      <view class="right-placeholder"></view>
    </view>

    <!-- 集团信息展示 -->
    <view class="group-info-card">
      <view class="card-title">
        <u-icon name="home" size="20" color="#007aff"></u-icon>
        <text>{{ groupInfo.name }}</text>
      </view>
    </view>

    <!-- 记录列表 -->
    <view class="follow-list" v-if="followList.length > 0">
      <view class="follow-card" v-for="(item, index) in followList" :key="index">
        <view class="follow-header">
          <view class="follow-time">{{ item.createTime }}</view>
          <view class="follow-actions">
            <u-icon name="edit-pen" size="20" color="#007aff" @click="editFollow(index)"></u-icon>
          </view>
        </view>
        <view class="follow-content">
          <view class="follow-item">
            <text class="item-label">递送方案时间：</text>
            <text class="item-value">{{ item.deliveryTime }}</text>
          </view>
          <view class="follow-item">
            <text class="item-label">递送方案政策资费：</text>
            <text class="item-value">{{ item.policy }}</text>
          </view>
        </view>
      </view>
    </view>

    <!-- 空状态 -->
    <view class="empty-state" v-else>
      <u-empty mode="data" text="暂无成员跟进记录"></u-empty>
    </view>

    <!-- 添加按钮 -->
    <view class="add-btn" @click="showFollowPopup">
      <u-icon name="plus" color="#fff" size="24"></u-icon>
    </view>

    <!-- 弹出表单 -->
    <u-popup v-model="showPopup" mode="center" border-radius="10" width="90%">
      <view class="popup-content">
        <view class="popup-title">{{ isEdit ? '编辑跟进记录' : '添加跟进记录' }}</view>
        <u-form :model="formData" ref="uForm" label-position="left" label-width="140">
          <u-form-item label="递送方案时间" required prop="deliveryTime">
            <u-calendar v-model="showCalendar" @confirm="dateSelect" mode="date"></u-calendar>
            <view class="date-input" @click="showCalendar = true">
              {{ formData.deliveryTime || '请选择递送方案时间' }}
              <u-icon name="calendar" size="20" color="#999"></u-icon>
            </view>
          </u-form-item>

          <u-form-item label="递送方案政策资费" required prop="policy">
            <u-input
              v-model="formData.policy"
              placeholder="请输入递送方案政策资费"
              type="textarea"
              height="100"
              maxlength="500"
            ></u-input>
          </u-form-item>
        </u-form>

        <view class="popup-btns">
          <u-button plain @click="showPopup = false">取消</u-button>
          <u-button type="primary" @click="submitForm">确定</u-button>
        </view>
      </view>
    </u-popup>
  </view>
</template>

<script>
export default {
  data() {
    return {
      groupId: "",
      groupInfo: {
        name: "加载中..."
      },
      followList: [],
      isEdit: false,
      editIndex: -1,
      showPopup: false,
      showCalendar: false,
      formData: {
        deliveryTime: "",
        policy: ""
      },
      rules: {
        deliveryTime: [
          { required: true, message: "请选择递送方案时间", trigger: "change" }
        ],
        policy: [
          { required: true, message: "请输入递送方案政策资费", trigger: "blur" }
        ]
      }
    };
  },
  methods: {
    goBack() {
      uni.navigateBack();
    },

    // 获取集团信息
    getGroupInfo() {
      // 模拟数据，实际应从接口获取
      const groupDetails = {
        "1": {
          name: "平凉市政府",
          district: "崆峒区",
          industry: "政府机构",
          manager: "张三"
        },
        "2": {
          name: "平凉市教育局",
          district: "崆峒区",
          industry: "教育",
          manager: "李四"
        },
        "3": {
          name: "平凉市人民医院",
          district: "崆峒区",
          industry: "医疗",
          manager: "王五"
        }
      };
      this.groupInfo = groupDetails[this.groupId] || { name: "未知集团" };
    },

    // 获取跟进记录
    getFollowList() {
      // 模拟数据，实际应从接口获取
      setTimeout(() => {
        this.followList = [
          {
            id: 1,
            createTime: "2023-05-10",
            deliveryTime: "2023-05-10",
            policy: "为该集团单位提供特定优惠政策，包括话费折扣、流量赠送等。"
          },
          {
            id: 2,
            createTime: "2023-06-20",
            deliveryTime: "2023-06-20",
            policy: "针对集团单位员工提供5G终端购机补贴，每台补贴200元。"
          }
        ];
      }, 500);
    },

    // 显示添加弹窗
    showFollowPopup() {
      this.isEdit = false;
      this.editIndex = -1;
      this.formData = {
        deliveryTime: "",
        policy: ""
      };
      this.showPopup = true;
    },

    // 编辑跟进记录
    editFollow(index) {
      const item = this.followList[index];
      this.isEdit = true;
      this.editIndex = index;
      this.formData = {
        deliveryTime: item.deliveryTime,
        policy: item.policy
      };
      this.showPopup = true;
    },

    // 日期选择回调
    dateSelect(e) {
      this.formData.deliveryTime = e.year + "-" + e.month + "-" + e.day;
    },

    // 提交表单
    submitForm() {
      this.$refs.uForm.validate(valid => {
        if (valid) {
          uni.showLoading({
            title: "保存中"
          });

          setTimeout(() => {
            if (this.isEdit) {
              // 编辑现有记录
              this.followList[this.editIndex] = {
                ...this.followList[this.editIndex],
                deliveryTime: this.formData.deliveryTime,
                policy: this.formData.policy
              };
            } else {
              // 添加新记录
              const now = new Date();
              const createTime =
                now.getFullYear() +
                "-" +
                (now.getMonth() + 1) +
                "-" +
                now.getDate();

              this.followList.unshift({
                id: Date.now(),
                createTime,
                deliveryTime: this.formData.deliveryTime,
                policy: this.formData.policy
              });
            }

            uni.hideLoading();
            uni.showToast({
              title: "保存成功",
              icon: "success"
            });
            this.showPopup = false;
          }, 1500);
        }
      });
    }
  },
  onLoad(options) {
    this.groupId = options.groupId || "";

    if (!this.groupId) {
      uni.showToast({
        title: "缺少集团单位ID",
        icon: "none"
      });
      setTimeout(() => {
        uni.navigateBack();
      }, 1500);
      return;
    }

    this.getGroupInfo();
    this.getFollowList();
  }
};
</script>

<style>
.follow-container {
  padding: 15px;
  background-color: #f5f7fa;
  min-height: 100vh;
  position: relative;
}

.page-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 20px;
}

.back-btn {
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.page-title {
  font-size: 20px;
  font-weight: bold;
  color: #333;
}

.right-placeholder {
  width: 40px;
}

.group-info-card {
  background-color: #fff;
  border-radius: 10px;
  padding: 15px;
  margin-bottom: 20px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

.card-title {
  display: flex;
  align-items: center;
  font-size: 18px;
  font-weight: bold;
  color: #333;
}

.card-title text {
  margin-left: 8px;
}

.follow-list {
  margin-bottom: 80px;
}

.follow-card {
  background-color: #fff;
  border-radius: 10px;
  padding: 15px;
  margin-bottom: 15px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

.follow-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-bottom: 10px;
  border-bottom: 1px solid #eee;
  margin-bottom: 10px;
}

.follow-time {
  color: #999;
  font-size: 14px;
}

.follow-content {
  padding: 5px 0;
}

.follow-item {
  margin-bottom: 10px;
}

.item-label {
  color: #666;
  font-size: 14px;
}

.item-value {
  color: #333;
  font-size: 14px;
  word-break: break-all;
}

.empty-state {
  margin-top: 50px;
}

.add-btn {
  position: fixed;
  right: 20px;
  bottom: 30px;
  width: 56px;
  height: 56px;
  background-color: #007aff;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 3px 10px rgba(0, 122, 255, 0.3);
  z-index: 99;
}

.popup-content {
  padding: 20px;
}

.popup-title {
  font-size: 18px;
  font-weight: bold;
  text-align: center;
  margin-bottom: 20px;
}

.date-input {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 40px;
  padding: 0 10px;
  border: 1px solid #ddd;
  border-radius: 4px;
  color: #333;
}

.popup-btns {
  display: flex;
  justify-content: space-between;
  margin-top: 30px;
}

.popup-btns u-button {
  width: 45%;
}
</style> 